<template>
  <div id="login">
    <div class="login-welcome">
      <div style="font-size:31px;
       color: rgba(211, 15, 201, 1)">珞布Notebook
      </div>
    </div>
    <div class="mylogin" align="center">
      <h4>注册</h4>
      <el-form
        :model="loginForm"
        :rules="loginRules"
        ref="loginForm"
        label-width="0px"
      >
        <el-form-item label="" prop="account" style="margin-top: 10px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                class="inps"
                placeholder="账号"
                v-model="loginForm.account"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="" prop="passWord">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-lock"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                class="inps"
                type="password"
                placeholder="密码"
                v-model="loginForm.passWord"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="" prop="email" style="margin-top: 10px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-message"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                class="inps"
                type="email"
                placeholder="邮箱"
                v-model="loginForm.email"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="" prop="validate">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-picture-outline"></span>
            </el-col>
            <el-col :span="11">
              <el-input
                class="inps"
                type="validate"
                placeholder="验证码"
                v-model="loginForm.code"
              ></el-input>
            </el-col>
            <el-col :span="2">
              <el-button id="btn-get" @click="submitEmail">获取验证码</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item style="margin-top: 55px">
          <el-button type="primary" round class="submitBtn" @click="submitForm"
          >注册
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex';


export default {
  name: 'Simpleregister',
  data() {
    return {
      loginForm: {
        account: '',
        passWord: '',
        email: '',
        code: '',
      },
      loginRules: {
        account: [{required: true, message: '请输入账号', trigger: 'blur'}],
        passWord: [{required: true, message: '请输入密码', trigger: 'blur'}],
        email: [{required: true, message: '请输入邮箱', trigger: 'blur'}],
        code: [{required: true, message: '请输入验证码', trigger: 'blur'}],
      },
    };
  },
  methods: {
    ...mapMutations(['changeregister']),
    submitEmail() {
      const email = this.loginForm.email;
      if (!email) {
        this.$message({
          type: 'error',
          message: '邮箱不能为空！',
        });
        return;
      }
      const userForm = new FormData();
      userForm.append("email", email);
      const data = {
        email: email
      };
      this.$axios.post("http://localhost:8001/user/email", data).then((res) => {
        console.log(res);
        if (res.data == 0) {
          this.$message({
            type: "error",
            message: "验证码发送错误",
          });
        } else {
          this.$message({
            type: "success",
            message: "验证码发送成功",
          });
        }
      });

    },
    submitForm() {

      const username = this.loginForm.account;
      const password = this.loginForm.passWord;
      const email = this.loginForm.email;
      const code = this.loginForm.code;
      console.log(code)
      if (!username) {
        this.$message({
          type: 'error',
          message: '账号不能为空！',
        });
        return;
      }
      if (!password) {
        this.$message({
          type: 'error',
          message: '密码不能为空！',
        });
        return;
      }
      if (!email) {
        this.$message({
          type: 'error',
          message: '邮箱不能为空！',
        });
        return;
      }
      if (!code) {
        this.$message({
          type: 'error',
          message: '验证码不能为空！',
        });
        return;
      }
      const userForm = new FormData();
      userForm.append("username", username);
      userForm.append("password", password);
      userForm.append("email", email);
      userForm.append("code", code);
      const data = {
        username: username,
        password: password,
        email: email,
        code: code
      };

      this.$axios.post("http://localhost:8001/user/register", data).then((res) => {
        console.log(res);
        if (res.data == 0) {
          this.$message({
            type: "error",
            message: "注册失败！",
          });
        }
        //注册成功
        if (res.data == 1) {
          this.$message({
            type: "success",
            message: "注册成功！",
          });
          this.$router.push(this.$route.path.repeat('register','login'));
        }
      });
    },
  },
};
</script>

<style scoped>
#login {
  width: 100vw;
  padding: 0;
  margin: 0;
  height: 100vh;
  font-size: 16px;
  background-position: left top;
  background-color: #d8d9eb;
  color: #e0d2d2;
  font-family: "Source Sans Pro";
  position: relative;
}

.login-welcome {
  width: 240px;
  height: 300px;
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 10px 50px 40px 40px;
}

.mylogin {
  width: 240px;
  height: 280px;
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 50px 40px 40px 40px;
  box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
  opacity: 1;
  background: linear-gradient(
    230deg,
    rgba(53, 57, 74, 0) 0%,
    rgb(0, 0, 0) 100%
  );
}

.inps input {
  border: none;
  color: #fff;
  background-color: transparent;
  font-size: 12px;
}

.submitBtn {
  background-color: transparent;
  color: #39f;
  width: 200px;
}
</style>

